<template>
	<view class="content">
		<view class="top_swiper">
			<!-- 返回 -->
			<swiper class="swiper_index" @change="change">
				<swiper-item v-for="(item,index) in sliderImageArr" :key="index">
					<view class="swiper-item" >
						<image class="swiper_pic" :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 图片数量 -->
			<view class="currNum">{{currentIndex}}/{{sliderImageArr.length}}</view>
		</view>
		<view class="auctionPrice">
			<view class="goodsPrice">
				<!-- <view class="sign iconfont">&#xe604;</view> -->
				<!-- <view class="price">{{goodsDatas.price}}</view> -->
			</view>
			<!-- <view class="goodsInter" >+</view> -->
			
			
			<!-- <view class="auctionPrice_list">
				<view class="auct_txt">购买价</view>
				<view class="inter">
					<view class="sign iconfont">&#xe604;</view>
					<view class="price">{{goodsDatas.price}}</view>
				</view>
			</view>
			<view class="auctionPrice_list">
				<view class="auct_txt">通宝抵扣</view>
				<view class="inter">
					<view class="price">{{goodsDatas.integral}}</view>
					<view class="sign_txt">通宝</view>
				</view>
			</view> -->
			
			<!-- <view class="autoLine"></view> -->
		
		</view>
		<!-- <view class="auctionOtprice"> <text class="sign iconfont"> &#xe604;</text> {{goodsDatas.otPrice}}</view> -->
		<view class="goods_name">{{goodsDatas.storeName}} <text style="margin-left: 15rpx;color: red;">{{goodsDatas.integral}}积分</text></view>
		<!-- <view class="goodsInter" ></view> -->
		<view class="goods_info">
			<view class="info_list">已售：{{goodsDatas.sales}}</view>
			<view class="info_list">库存：{{goodsDatas.stock}}</view>
			<view class="info_list">运费：免邮</view>
		</view>
		<!-- 评价 -->
		<view class="goods_eve">
			<view class="evaluate_title">
				<view class="all_evaluate">用户评价{{datas.replyCount == 0 ? '' : '(' + datas.replyCount + ')'}}   </view>
				<view class="more_evaluate" @click="goEvaluate">
					<text>全部评价</text><text class="iconfont">&#xe601;</text>
				</view>
			</view>
			<view class="evaluate_cont" v-if="datas.replyCount != 0">
				<view class="evaluate_cont_top">
					<view class="evaluate_fl">
						<view class="avatar">
							<image class="avatar_img" :src="reply.avatar" mode=""></image>
						</view>
						<view class="avatar_info">
							<view class="user_name ellipsis">{{reply.nickname}}</view>
							<view class="user_star">
								<tui-rate :current="reply.productScore" normal="#DBDBDB" active="#C7973B" :size="14"></tui-rate>
							</view>
						</view>
					</view>
					<view class="evaluate_date">{{reply.createTime}}</view>
				</view>
				<view class="specification">
					<text>{{reply.sku}}</text>
				</view>
				<view class="specification_cont">{{reply.merchantReplyContent}}</view>
				
				<view class="specification_pic">
					<view class="pic_list" v-for="(item,index) in reply.picturesArr" :key="index">
						<image class="evaluate_image" :src="item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		
		</view>
		
		<view class="goods_detail">商品详情</view>
		<view class="detail_cont">
			<rich-text :nodes="goodsDatas.description"></rich-text>
		</view>
		
		<view class="fixed">
			<view class="fixedcont">
				<view class="ficedfl" @click="popup">
					<image class="iconservice" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/service.png" mode=""></image>
					<view class="servicetxt">客服</view>
				</view>
				<view class="fixedfr" >
					<!-- <view class="add" @click="goAddCar">加入购物车</view> -->
					<view class="buy" @click="buyImmediately">立即兑换</view>
				</view>
			</view>
		</view>
		
		<!-- 拨打客服电话 -->
		<view class="tuiPop" v-show="popupShow == true" @click="close"></view>
		<view class="tuipopcont" v-show="popupShow == true">
			<view class="getPhone" @click="goPhone(phone)"><text style="color: #333333;">拨打电话：</text>{{phone}}</view>
			<view class="cancel" @click="close">取消</view>
		</view>
		
		<!-- 属性规格选项 -->
		<view class="" @touchmove.stop.prevent="moveHandle">
			<uni-popup ref="popup" type="bottom">
				<view class="popup">
					<view class="popImage">
						<view class="goodsImg">
							<image class="goods_img" :src="attrImage" mode=""></image>
						</view>
						<view class="goods_attribute">
							<view class="goods_attr_price">
								<view class="now_price"> 
									<text v-if="attrInter != 0">  {{attrInter}}积分</text>
								</view>
								<!-- <view class="old_price"> <text class="iconfont icon">&#xe604;</text> {{goodsDatas.otPrice}}</view> -->
							</view>
							<view class="goods_sku">库存：{{attrSku}}</view>
						</view>
					</view>
					<view class="popAttr" v-for="(item,indexA) in productAttr" :key="indexA">
						<view class="attrName">{{item.attrName}}</view>
						<view class="attr_group">
							<view :class="['attrlist', {attrCurr: item.index == lIndex}]"  
							v-for="(lItem,lIndex) in item.attrValue" :key="lIndex" @click="tapAttr(indexA, lIndex)">{{lItem.attr}}</view>
						</view>
					</view>
					<view class="attr_num">
						<view class="attr_num_name">购买数量：</view>
						<view class="num">
							<tui-numberbox :value="buyNum" :height="36" :width="64" :min="1" :index="index" @change="changeNum"></tui-numberbox>
						</view>
					</view>
					
					<view class="popbtn" @click="goSureOrder(id,isBuy)">{{isBuy == 0 ? '加入购物车' : '购买'}}</view>
				</view>
			</uni-popup>
			
		</view>
		
	</view>
</template>

<script>
	import uniPopup from "../../../../components/uni-popup/uni-popup.vue"
	export default {
	    components: {uniPopup},
		data() {
			return {
				popupShow:false,
				index:3,
				id:''  ,// 商品id
				goodsDatas:{},
				currentIndex:1 ,// 轮播数量
				sliderImageArr:[]  ,// 轮播图片
				datas:{},  // 
				reply:{}  ,// 评论
				phone:'' ,// 客服电话
				buyNum:1  ,// 购买数量
				productAttr:[]   ,// 属性
				productSelectValue:[]  ,// 选中的规格
				attrPrice:0,  // 价格
				attrSku:0   ,//  库存
				productValue:[]  ,//属性分类
				attrImage:'', 
				isBuy:-1   ,// 点击出现属性
				unique:'',
				userInfo:{},
				attrInter:0
 			}
		},
		onLoad(options) {
			console.log(options)
			if (Object.keys(options).length != 0) {
				this.id = options.id
				this.getGoodsInfo();
				this.getPhone();
			}
		},
		methods: {
			// 轮播改变
			change: function (e) {
				console.log(e)
				this.currentIndex = e.detail.current + 1
			},
			
			// 取消
			popup: function() {
				this.popupShow = !this.popupShow
			},
			close: function () {
				this.popupShow = !this.popupShow
			},
			// 获取商品详情
			getGoodsInfo: function () {
				this.api.integralProductInfo(this.id).then(res => {
					console.log(res)
					res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi,'<img style="max-width:100%;height:auto;"');
					this.goodsDatas = res.data.storeInfo;
					this.sliderImageArr = res.data.storeInfo.sliderImageArr;
					this.datas = res.data;
					this.reply = res.data.reply;
					let productAttr = res.data.productAttr;
					let value = [];
					for (let i = 0; i < productAttr.length; i++) {
						value.push(productAttr[i].attrValueArr[0]);
					}
					this.productSelectValue = value;
					this.productAttr = productAttr;
					this.productValue = res.data.productValue;
					this.getCheckedValue(value);  // 获取选中的属性
					
				})
			},
			// 获取客服电话
			getPhone: function () {
				let code = 'kfdh'
				this.api.getServiceTel(code).then(res => {
					console.log(res)
					this.phone = res.data.memo
				})
			},
			// 拨打电话
			goPhone: function (phone) {
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			// 全部评价
			goEvaluate: function () {
				uni.navigateTo({
					url: '../../integralShopping/integralEvaluate/integralEvaluate?id=' + this.goodsDatas.id,
				});
			},
			// 加入购物车出现弹窗
			goAddCar: function () {
				this.isBuy = 0;
				this.$refs.popup.open()
			},
			// 立即购买
			buyImmediately: function () {
				this.isBuy = 1;
				this.$refs.popup.open()
			},
			// 改变数量
			changeNum: function(e) {
				console.log(e)
				this.buyNum = e.value;
			}, 
			moveHandle: function () {
				return
			},
			//默认选中属性；
			DefaultSelect: function() {
				let productAttr = this.productAttr;
				let value = [];
				for (let i = 0; i < productAttr.length; i++) {
					// this.$set(productAttr[i], "index", 0);
					productAttr[i].index = 0;
					value.push(productAttr[i].attrValueArr[0]);
				}
				console.log(value,"-----------")
			},
			// 改变默认属性
			tapAttr: function (indexA, lIndex) {
				console.log(indexA,"====");
				console.log(lIndex,"----")
				this.productAttr[indexA].index = lIndex;
				console.log(this.productAttr[indexA]);
				let productAttr = this.productAttr;
				let value = [];
				console.log(productAttr)
				for (let i = 0; i < productAttr.length; i++) {
				  for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
				    if (productAttr[i].index === j) {
				      value.push(productAttr[i].attrValueArr[j]);
				    }
				  }
				}
				console.log(value,"----")
				this.getCheckedValue(value)
				
			},
			//获取被选中属性；
			getCheckedValue: function(value) {
				let productValue = this.productValue;
				console.log(productValue[value.sort().join(",")])
				this.attrPrice = productValue[value.sort().join(",")].price;
				this.attrSku = productValue[value.sort().join(",")].stock;
				this.attrImage = productValue[value.sort().join(",")].image;
				this.unique = productValue[value.sort().join(",")].unique;
				this.attrInter = productValue[value.sort().join(",")].integral
			},
			
			// 确认订单（立即购买，加入购物车）
			goSureOrder: function (id,isbuy) {
				console.log(id)
				let that = this;
				console.log(that.unique,"---------")
				that.api.integralAddCar({
					cartNum:that.buyNum,
					new:isbuy,
					productId:id,
					uniqueId:that.unique,
					combinationId:0,
					secKillId:0,
					bargainId:0
				}).then(res => {
					console.log(res)
					if (isbuy == 0) {
						that.isBuy = -1;
						that.tui.toast("添加成功")
						that.$refs.popup.close()
						setTimeout(function () {
							uni.$emit('shoppingCar',{msg:'页面更新'});
						},500)
						
					} else if (isbuy == 1) {
						that.isBuy = -1;
						let cartId = res.data.cartId;
						uni.navigateTo({
							url: '../../shoppingCar/submitOrder/submitOrder?cartId=' + cartId,
						});
						that.$refs.popup.close()
					}
					
				})
				
			},
			// 获取个人信息
			// 获取我的信息
			getUserInfo: function() {
				this.api.getUserInfo().then(res => {
					console.log(res)
					this.userInfo = res.data.yxUserinfo;
				})
			},
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-size: 30rpx;
		color: #212121;
		background: #FFFFFF;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top_swiper {
		width: 100%;
		box-sizing: border-box;
		// height: 750rpx;
		position: relative;
		.swiper_index {
			width: 100%;
			box-sizing: border-box;
			height: 750rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				.swiper_pic {
					width: 100%;
					height: 100%;
				}
			}
		}
		.back {
			font-size: 70rpx;
			position: absolute;
			left: 20rpx;
			top: 60rpx;
			z-index: 15;
			color: rgba(0, 0, 0, 0.41);
		}
		.currNum {
			position: absolute;
			right: 20rpx;
			bottom: 80rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			width: 80rpx;
			line-height: 35rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 9rpx;
			z-index: 15;
		}
		
	}
	.auctionPrice {
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 36rpx 0rpx 36rpx;
		color: #E42221;
		font-size: 62rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		.goodsPrice {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-right: 10rpx;
			.sign {
				font-size: 36rpx;
				color: #FFDA71;
			}
		}
		.goodsInter {
			font-size: 28rpx;
			color: #212121;
		}
		
		.auctionPrice_list {
			width: 50%;
			box-sizing: border-box;
			text-align: center;
			.auct_txt {
				width: 100%;
				box-sizing: border-box;
				font-size: 24rpx;
				color: #212121;
			}
			.inter {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				.sign {
					font-size: 32rpx;
					color: #FFDA71;
					padding-top: 18rpx;
				}
				.sign_txt {
					font-size: 28rpx;
					padding-top: 18rpx;
				}
			}
			
		}
		.autoLine {
			width: 3rpx;
			height: 34rpx;
			background: #999999;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			z-index: 55;
		}
	}
	.auctionOtprice {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 36rpx 20rpx 36rpx;
		font-size: 30rpx;
		text-decoration: line-through;
		color: #999999;
	}
	.old_price {
		width: 100%;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #999999;
		padding: 0 20rpx 36rpx 36rpx;
		text-decoration: line-through;
		.icon {
			font-size: 24rpx;
		}
	}
	.goods_name {
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx 20rpx 36rpx;
		border-bottom: 2rpx solid #F3F6F6;
		font-weight: 500;
	}
	.goods_info {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		line-height: 34rpx;
		.info_list {
			width: 33.3%;
			box-sizing: border-box;
			text-align: center;
			font-size: 24rpx;
			color: #666666;
		}
		
	}
	.goods_detail {
		width: 100%;
		box-sizing: border-box;
		line-height: 64rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		background: #F5F5F5;
	}
	.detail_cont {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx 150rpx 20rpx;
	}
	.fixed {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 16rpx 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.fixedcont {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			.fixedfr {
				width: 552rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.buy {
					width: 522rpx;
					line-height: 80rpx;
					background: #E42221;
					color: #FFFFFF;
					border: 2rpx solid #E42221;
					text-align: center;
					border-radius: 8rpx;
				}
			}
			.ficedfl {
				width: calc(100% - 552rpx);
				box-sizing: border-box;
				text-align: center;
				.iconservice {
					width: 46rpx;
					height: 46rpx;
					margin: 0 auto;
				}
				.servicetxt {
					font-size: 22rpx;
					color: #666666;
					line-height: 30rpx;
				}
				
			}
		}
		
	}
	.tuiPop {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 996;
		transition: all 0.3s ease-in-out;
	}
	.tuipopcont {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 998;
		// transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		padding: 30rpx;
		.cancel {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
		}
		.getPhone {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	// 评价
	.goods_eve {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		border-top: 16rpx solid #F5F5F5;
		background: #FFFFFF;
		.evaluate_title {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #333333;
			font-weight: 500;
			.more_evaluate {
				font-size: 22rpx;
				color: #333333;
				.iconfont {
					font-size: 22rpx;
					color: #D1D1D1;
					margin-left: 5rpx;
				}
			}
		}
		
		.evaluate_cont {
			width: 100%;
			box-sizing: border-box;
			padding-top: 30rpx;
			.evaluate_cont_top {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #140005;
				.evaluate_date {
					width: 180rpx;
					color: #999999;
					font-size: 22rpx;
					text-align: right;
				}
				.evaluate_fl {
					width: calc(100% - 180rpx);
					box-sizing: border-box;
					padding-right: 10rpx;
					display: flex;
					justify-content: flex-start;
					// align-items: center;
					.avatar {
						width: 72rpx;
						height: 72rpx;
						.avatar_img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.avatar_info {
						width: calc(100% - 72rpx);
						box-sizing: border-box;
						padding-left: 16rpx;
						display: flex;
						flex-flow: column;
						justify-content: space-between;
						
					}
					
					
				}
				
				
			}
			.specification {
				width: 100%;
				box-sizing: border-box;
				line-height: 60rpx;
				font-size: 22rpx;
				color: #999999;
				margin: 16rpx 0;
				text {
					padding: 0 20rpx;
					background: #F0F0F0;
					border-radius: 4rpx;
				}
			}
			.specification_cont {
				width: 100%;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #140005;
				line-height: 44rpx;
			}
			.specification_pic {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-flow: wrap;
				padding: 20rpx 0;
				.pic_list {
					width: 171rpx;
					height: 162rpx;
					margin-right: 24rpx;
					margin-bottom: 20rpx;
					.evaluate_image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				
			}
			
			
			
		}
	
	}
	// 商品规格弹窗、
	.popup {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 20rpx 0 0 0;
		border-radius: 16rpx 16rpx 0 0;
		.popbtn {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 36rpx;
			color: #FFFFFF;
			height: 89rpx;
			line-height: 89rpx;
			background: #E42221;
			margin-top: 30rpx;
		}
		.popImage {
			width: 100%;
			box-sizing: border-box;
			height: 135rpx;
			padding-left: 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			.goodsImg {
				width: 172rpx;
				height: 172rpx;
				position: relative;
				top: -90rpx;
				left: 0;
				z-index: 10;
				.goods_img {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
			.goods_attribute {
				width: calc(100% - 172rpx);
				box-sizing: border-box;
				padding-left: 20rpx;
				font-size: 30rpx;
				color: #E42221;
				.goods_sku {
					font-size: 24rpx;
					color: #666666;
					line-height: 40rpx;
				}
				.goods_attr_price {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					.now_price {
						font-size: 30rpx;
					}
					.old_price {
						font-size: 22rpx;
						color: #999999;
						text-decoration: line-through;
						padding-left: 15rpx;
					}
				}
			}
		
		}
		.popAttr {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			.attrName {
				width: 100%;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #212121;
				line-height: 40rpx;
				padding-bottom: 10rpx;
			}
			.attr_group {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.attrlist {
					line-height: 58rpx;
					font-size: 28rpx;
					color: #999999;
					padding: 0 20rpx;
					min-width: 152rpx;
					text-align: center;
					background: #F8F8F8;
					border-radius: 8rpx;
					margin: 0 20rpx 10rpx 0;
					&.attrCurr {
						background: #E42221;
						color: #FFFFFF;
					}
				}
			}
			
		}
		.attr_num {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			
		}
		
		
		
		
		
		
		
		
	}
	
	
	
	
	
	
	
	
	
	

</style>
